import React, { useEffect } from "react"
import GpContainer from "@/components/GpContainer"
import { View } from "@tarojs/components"
import { ArrowRight } from "@taroify/icons"
import { useSetState } from "@/utils/hooks"
import Taro from "@tarojs/taro"
import { logoff, logout } from "@/apis/yikao-community"
import { requestIsFullfilled } from "@/utils/request"
import { useAppDispatch } from "@/store/hook"
import { refreshUserInfo } from "@/store/actions/auth"
import styles from "./index.module.scss"
import { navigation } from "@/utils/router"
import { pageMapper } from "@/constants/pageMap"
import { authLs } from "@/utils/auth"

type IState = {
  locationAuthrized: boolean
}
/**
 * @page 账号设置
 */
export default function AccountSetting() {
  const dispatch = useAppDispatch()
  const [state, setState] = useSetState<IState>({
    locationAuthrized: false
  })
  useEffect(() => {
    Taro.getSetting({
      success: res => {
        if (res.authSetting["scope.userFuzzyLocation"]) {
          setState({
            locationAuthrized: true
          })
        }
      }
    })
  }, [])
  function handleLogOff() {
    function fail() {
      Taro.hideLoading()
      Taro.showToast({
        title: "注销失败",
        icon: "none"
      })
    }
    Taro.showModal({
      title: "提示",
      content: "确定要注销账号吗？",
      success: async ({ confirm }) => {
        if (confirm) {
          Taro.showLoading({
            title: "注销中..."
          })
          try {
            const res = await logoff()
            if (requestIsFullfilled(res)) {
              // 注销用户后 将本地的token删除 不然还是获取到之前设置的年份地区专业信息了
              authLs.removeToken()
              await dispatch(refreshUserInfo() as any)
              Taro.hideLoading()
              Taro.showToast({
                title: "注销成功"
              })
              Taro.navigateBack()
            } else {
              fail()
            }
          } catch (error) {
            console.info("账号注销失败", error)
            fail()
          }
        }
      }
    })
  }
  function handleLogOut() {
    function fail() {
      Taro.hideLoading()
      Taro.showToast({
        title: "退出登录失败",
        icon: "none"
      })
    }
    Taro.showModal({
      title: "提示",
      content: "确定要退出登录吗？",
      success: async ({ confirm }) => {
        if (confirm) {
          Taro.showLoading({
            title: "退出中..."
          })
          try {
            const res = await logout()
            if (requestIsFullfilled(res)) {
              await dispatch(refreshUserInfo() as any)
              Taro.hideLoading()
              Taro.showToast({
                title: "退出登录成功"
              })
              Taro.navigateBack()
            } else {
              fail()
            }
          } catch (error) {
            console.info("退出登录失败", error)
            fail()
          }
        }
      }
    })
  }
  return (
    <GpContainer
      style={{
        backgroundColor: "#FFFFFF",
        minHeight: "100vh"
      }}
    >
      <View className={styles.cell}>
        <View className={styles.label}>位置信息</View>
        <View className={styles.value}>
          {state.locationAuthrized ? "使用小程序时" : "暂未授权"}
          <ArrowRight className={styles.icon} color="#8A8A8A" />
        </View>
      </View>
      <View
        className={styles.cell}
        onClick={() => navigation(pageMapper.external, { url: process.env.__USER_AGREEMENT__ })}
      >
        <View className={styles.label}>用户协议</View>
        <View className={styles.value}>
          <ArrowRight className={styles.icon} color="#8A8A8A" />
        </View>
      </View>
      <View
        className={styles.cell}
        onClick={() => navigation(pageMapper.external, { url: process.env.__PRIVACY_POLICY__ })}
      >
        <View className={styles.label}>隐私声明</View>
        <View className={styles.value}>
          <ArrowRight className={styles.icon} color="#8A8A8A" />
        </View>
      </View>
      <View className={styles.cell} onClick={handleLogOff}>
        <View className={styles.label}>账号注销</View>
        <View className={styles.value}>
          <ArrowRight className={styles.icon} color="#8A8A8A" />
        </View>
      </View>
      <View className={styles.logoutBtn} onClick={handleLogOut}>
        退出登录
      </View>
    </GpContainer>
  )
}
